import type { ISectionDetails } from '@/interfaces';

export default function QuerySectionTagGroup({
  details,
}: {
  details: ISectionDetails;
}) {
  const tagGroups = details.tagGroups || [];

  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-tags me-2"></i>
            标签组
          </div>
          <div className="card-body">
            {tagGroups.length > 0 && (
              <ul className="list-group list-group-flush">
                {tagGroups.map((item) => {
                  return (
                    <li key={item.id} className="list-group-item">
                      {item.name}
                    </li>
                  );
                })}
              </ul>
            )}

            {tagGroups.length === 0 && (
              <div className="text-center text-muted">暂无标签组</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
